<script setup>
import SvgIcon from '../../components/SvgIcon.vue'
const props = defineProps({
  type: {
    type: String,
    validator(val) {
      const types = ['primary', 'info', 'danger']
      if (types.includes(val)) {
        return true
      } else {
        alert('type的值必须是primary,info,danger之一')
        return false
      }
    },
    default: 'primary'
  },
  circle: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String
  }
})
</script>
<template>
  <button
    class="button text-slate-200 p-1 px-2"
    :class="[
      type === 'primary' ? 'bg-blue-600 hover:bg-blue-900' : '',
      type === 'info' ? 'bg-green-600 hover:bg-green-900' : '',
      type === 'danger' ? 'bg-red-600 hover:bg-red-900' : '',
      circle ? 'rounded-full ' : 'rounded-md'
    ]"
    :disabled="disabled"
  >
    <SvgIcon
      name="loading"
      v-if="loading"
      class="w-4 h-4 inline mr-1 animate-spin"
    />
    <SvgIcon :name="icon" v-if="icon" class="w-4 h-4 inline" color="white" />
    <span class="ml-1"> <slot></slot> </span>
  </button>
</template>

<style lang="scss" scoped></style>
